<template>
    <div class="UserRecentArticles">
           <div style=" width: 100%;">
               <input type="text" placeholder="搜索文章标题" v-model="search" >
               <span class="search" @click="search_user">搜索</span>
           </div>
          <ul >
              <li v-for="(item,index) in essayOld " :key="item.wid">
                  <img v-if="item.img !== ''" :src="item.img.search(',') === -1 ? item.img  :  item.img.split(',')[0]" alt="图片丢失">
                  <img v-else src="/img/common/t01d1a844d08ac8f105.jpg" alt="图片丢失" title="暂未上传图片">
                  <div class="operate" @click="view(item)">
                      <p style="color: #e79755;width: 20vw" class="operate_title">{{ item.title }}</p>
                      <p :style="{'color': item.status===1 ? '#68c070' : item.status === -1 ? '#e13030' : '#eec04e'  }" >
                          {{ item.status === 1 ? '审核通过': item.status === -1 ? "审核失败" : "审核中" }}
                      </p>
                      <div>
                          <span style="margin-right: 0.5vw" class="state">
                             浏览 {{item.visit>10000 ? (item.visit/10000).toFixed(1)+"万" : item.visit}}
                          </span>
                          <span class="state">
                              赞 {{item.likes>10000 ? (item.likes/10000).toFixed(1)+"万" : item.likes}}
                          </span>
                      </div>
                  </div>

                  <div class="operate_right">
                      <p>{{dayjs(item.date).format('YYYY-MM-DD')}}</p>
                      <div >
                          <span class="edit" @click="edit(item)">
                              编辑
                          </span>
                          <span class="delete" @click="del(item,index)">
                              删除
                          </span>
                      </div>
                  </div>
              </li>
          </ul>
    </div>
    <Popover
        @outcome="outcome_"
        v-show="outcome"
        :title="popover_title"
        :style="{
           'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c',
           'background':   $store.state.nowTime==='moon' ? 'rgba(38,37,37,0.7)' : 'rgba(255, 255, 255, 0.7)'
             }"></Popover>
</template>

<script>
import api from "@/api";
import Popover from "@/components/PublicComponents/Popover.vue";
import dayjs from "dayjs";

export default {
    name: "UserRecentArticles",
    components: {Popover},
    data(){
        return{
            search:"",
            essayOld:[],
            essay:[
                {
                    visit:"",
                    likes:"",
                    img:"",
                    status:"",
                    date:"",
                    title:"",
                }
            ],
            outcome:false,
            popover_title:"",
            del_:"",
            item_:"",
            index_:"",
        }
    },
    mounted() {
        //獲取用户所有的文章信息
        //获取登录用户的信息
        let user = JSON.parse(window.localStorage.getItem("user"));
        if(user!=null){
            api.getUserWritingsAll(user.uid).then((res)=>{
               this.essay =  res.data.data;
               this.essayOld = res.data.data;
            })
        }
    },
    watch:{
        search(){
            let arr=[];
            if(this.search === ""){
                this.essayOld = null;
                arr = this.essay;
                this.essayOld =  arr
            }
        },
        essayOld(newValue,oldValue){
            this.essayOld = newValue;
        }
    },
   methods:{
       dayjs,
       outcome_(outcome){
           this.outcome = false;
           this.del_ = outcome;
           if(this.del_){
               api.writingsDel(this.item_.wid).then((res)=>{
                   this.essayOld.splice(this.index_,1);
                   this.item_ = "";
                   this.index_ = "";
               })

           }
       },
       view(item){
           window.localStorage.setItem("essayInfo",JSON.stringify(item))
           this.$router.replace({path:'/detail'});
       },
       edit(item){
           window.localStorage.setItem("Article_editing_",JSON.stringify(item))
           this.$router.replace({path:'/articleModifications'});
       },
       del(item,index){
           this.outcome = true;
           this.popover_title = "确认删除文章"+item.title+"?"
           this.item_ = item;
           this.index_ = index;
       },
       search_user(){
           let arr=[];
          if(this.search === ""){

          } else {
              this.essayOld=null;
               for (let i =0;i<this.essay.length;i++){
                   if(this.essay[i].title.indexOf(this.search) !== -1){
                        arr.push(this.essay[i])
                   }
               }
              this.essayOld=arr;
          }

       }
   }
}
</script>

<style scoped>

input{
    position: relative;
    outline: none;
    height: 4vh;
    min-height: 20px;
    margin: auto;
    border:0;
    color: #4b73f1;
    text-indent: 0.5rem;
    background: transparent;
    border-bottom: 1px solid #8f8c8c;
}
.search{
    content: "搜索";
    padding: 5px 10px;
    color: #f8f6f6;
    background: #0c98ea;
}
.search:hover{
    cursor: pointer;
    opacity: 0.9;
}
.UserRecentArticles{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    padding: 10px;
}
h3{
    display: flex;
    align-items: center;
    width: 100%;
    height: 5vh;
    min-height: 40px;
    border-bottom: 1px solid #8f8c8c;
}
ul{
    width: 100%;
    list-style: none;
    height: 84%;
    overflow: auto;
    margin-top: 5px;
    overflow-y: scroll;
}
ul::-webkit-scrollbar {
    width: 4px;
}
ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
}
ul::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

ul li{
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0.1vw;
    height: 13vh;
    min-height: 40px;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
    border-bottom: 1px solid rgba(143, 140, 140, 0.5);
    animation: lis .5s ease-in-out 0s 1 forwards;
}
@keyframes lis {
    0%{
        transform: scaleY(0);
    }100%{
         transform: scaleY(1);
     }
}
ul li img{
    width: 8vw;
    height: 12vh;
    min-height: 40px;
    min-width: 80px;

}
.operate,.operate_right{
    width: 18vw;
    z-index: 99;
    padding: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #817a7a;

}
.operate_right{
    width: 40%;
    margin: auto;
    text-align: right;
}
.operate_right p{
    font-size: 14px;
}
.delete ,.edit{
    color: #8f8c8c;
}
.delete:hover ,.edit:hover{
    cursor: pointer;
    color: #e18953;
    opacity: .9;
}
.state{
   font-size: 14px;
}
.operate_title{
    width: 18vw !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>